<template>
  <div class="lyric">
    <el-table :data="songs" stripe style="width: 100%" @row-dblclick="playMusicList" lazy :row-style="changeStyle">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope>
          <a>
            <i class="iconfont icon-icon-test" v-show="isShow"></i>
            <i class="iconfont icon-collectselected" style="color:#bd0000;" v-show="!isShow"></i>
          </a>
          <i class="iconfont icon-download"></i>
        </template>
      </el-table-column>
      <el-table-column label="音乐标题">
        <template slot-scope="scope">
          <div class="name">
            <span class="title">{{scope.row.name}}</span>
            <!-- index &lt; 4 ? item : '' -->
            <span v-for="(item, index) in scope.row.lyrics" :key="index" v-html="index &lt; scope.row.smallnum ? item : ''">
              {{item }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="ar[0].name" label="歌手" width="150"></el-table-column>
      <el-table-column prop="al.name" label="专辑"></el-table-column>
      <el-table-column prop="dt" label="时长" width="200">
        <template slot-scope="scope">
          <div class="time">
            <span>{{ scope.row.dt }}</span>
            <div class="btn">
              <el-button size="mini" round @click="changSongs(scope.row.index)" v-if="scope.row.smallnum !== 4">收起歌词</el-button>
              <el-button size="mini" round @click="changSongs(scope.row.index)" v-if="scope.row.smallnum === 4">展开歌词</el-button>
              <el-button size="mini" round>复制歌词</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getCloudSearch } from '../../network/search.js'
import { getMusicUrl, getMusicMenu } from '../../network/swiper.js'
import { timeFormat } from '../common/util.js'
export default {
  props: ['type', 'value'],
  data () {
    return {
      songs: [],
      interceptsongs: [],
      songCount: 0,
      isShow: true,
      index: 0
    }
  },
  methods: {
    changeStyle ({ row }) {
      // console.log(row)
      if (row) {
        return 'display: flex; align-item: flex-start;'
      }
    },
    changSongs (index) {
      if (this.songs[index].smallnum === 4) {
        this.songs[index].smallnum = this.songs[index].lyrics.length
      } else {
        this.songs[index].smallnum = 4
      }
      console.log(this.songs)
    },
    // 播放音乐
    playMusicList (row) {
      // console.log(row)
      if (row.id === null) return
      this.getMusicUrl(row.id)
      this.getMusicMenu(row.id)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    },
    getCloudSearch (type, keywords) {
      getCloudSearch(type, keywords).then(res => {
        // console.log(res.data)
        res.data.result.songs.forEach(item => {
          item.dt = timeFormat(item.dt)
          item.smallnum = 4
          item.index = this.index++
        })
        this.songs = res.data.result.songs
        this.songCount = res.data.result.songCount
        this.$emit('singerCount', this.songCount + '首歌词')
        // console.log(this.songs)
      })
    }
  },
  created () {
    this.getCloudSearch(this.type, this.value)
  },
  watch: {
    value (newVal, oldVal) {
      // console.log('新关键词:' + newVal)
      this.value = newVal
      this.getCloudSearch(this.type, this.value)
    }
  }
}
</script>

<style lang="less" scoped>
  .name {
    display: flex;
    flex-direction: column;
    .title {
      margin-bottom: 10px;
    }
  }
  .time {
    display: flex;
    flex-direction: column;
    span {
      // text-align: center;
    }
    .btn {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
    }
  }
</style>
